<template>
	<view class="order  xbs">
		<view class="top xflex-x-between ">
			<view class="xflex-x">
				<image class="xz" src="/static/image/mine/dd.png" mode=""></image>
				<view class="xcf xflex-x">
					<text>{{time}}s</text>
					<view class="sn">
						正在等待酒店接单...
					</view>
				</view>
			</view>
			<view class="xcf state">
				成功发布
			</view>
		</view>

		<view class="xp24-32" style="padding-top: 0;">
			<view class="xflex-x-between xmt32">
				<view class="xflex-x">
					<image class="addicon" src="/static/image/mine/address.png" mode=""></image>
					<view class="addname">
						{{info.keyword}}
					</view>

				</view>
				<view class="xflex-x-center" @click="edit()">
					<view class="addxg">
						修改订单
					</view>
					<image class="jt" src="/static/image/mine/jt.png" mode=""></image>
				</view>
			</view>


			<view class="xmt20">
				<view class="time">
					{{info.order_info.time}}<span class="xml32">{{info.order_info.night}}晚</span>
				</view>
				<view class="info ">
					{{info.order_info.house}}间 · {{info.order_info.adult}}成人 · {{info.order_info.children}}儿童
				</view>
			</view>

			<view class="star xmt20 xai">
				<view class="" v-for="(item,index) in info.order_info.attach">
					<view class="xmb20">
						{{item.name}}：{{item.value}}
					</view>

				</view>
				
				<view class="">
					<view class="xmb20">
						价格：<text style="color: #198EFF;">{{info.price}}</text>
					</view>
				</view>
				
				<view class="">
					<view class="xmb20" >
						总价格：<text style="color: #198EFF;">{{info.expect}}</text>
					</view>
				</view>
			</view>


			<view class="xflex-x-between xmt32">
				<view class="">

				</view>
				<view class="cancel" @click="cancel()">
					取消订单
				</view>

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		hotelcancel,
		hotelpublish
	} from "/network/home.js"
	import {
		defineProps,
		defineEmits,
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect
	} from 'vue'
	let props = defineProps(['info'])

	let emit = defineEmits(['updata','edit','del','delc'])
	
	const edit = () =>{
		console.log("====");
		emit('edit',props.info)
	}
	


	const timerId = ref(null);
	let time = ref(0)
	
	

	// 启动定时器的函数
	const startTimer = () => {
		// 假设我们每秒钟更新一次数据  
		if(time.value == 1) {
			console.log(time.value == 1);
			emit('delc')
			return
		}
		time.value = time.value -1
		setTimeout(() => {
			// 在这里执行你的代码  
			startTimer()
		}, 1000);
		
	};
	// 清除定时器的函数
	const clearTimer = () => {
		if (timerId.value) {
			clearInterval(timerId.value);
			timerId.value = null;
		}
	};
	// watchEffect(()=>{
	// 	// clearInterval(timerId.value);
	// 	// timerId.value = null;
	// 	clearTimer()
	// 	// time.value = Math.ceil((new Date()/1000) - props.info.publishtime )
		
		
	// })
	
	time.value = props.info.match.time
	
	
	

	

	// 在组件挂载时启动定时器  
	onMounted(()=>{
		startTimer()
		// clearTimer()
	});

	// 在组件卸载时清除定时器  
	onUnmounted(()=>{
		clearTimer()
	});

	const cancel = () => {
		if(!props.info.id) return
		hotelcancel({
			id: props.info.id
		}).then(res => {
			clearTimer()
			uni.showToast({
				icon:"none",
				title:"取消成功"
			})
			emit('del')
		})
	}
</script>

<style lang="scss" scoped>
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.top {
		padding: 24rpx 29rpx 30rpx;
		// box-sizing: border-box;
		background: rgb(59,210,5);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #fff;
	}

	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #fff;
	}

	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}

	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;

	}

	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}

	.star {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}

	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
</style>